<template>
  <div>
    <div class="common-layout">
      <el-container style="flex: 1">
        <el-header>
          <Header></Header>
        </el-header>
        <el-container class="back">
          <el-aside width="300px">
            <CitizenAside></CitizenAside>
          </el-aside>
          <el-main style="background-color:transparent;">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import CitizenAside from "@/components/CitizenAside.vue";
export default {
  name: "",
  components: {
    Header,
    CitizenAside,
  },
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="css" scoped>
/* 路由的过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* 整体盒子 */
.common-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* background-color: blue; */
}

/* 头部 */
.el-header {
  --el-header-padding: 0;
  height: 210px;
  /* background-color: rgb(203, 128, 240); */
}

/* 内容部分 */
.el-main {
  --el-main-padding: 0px;
  height: 480px;
  /* width: 200px; */
  margin-right: 50px;
}

/* 背景部分 */
.back {
  height: 100%;
  background-color: aliceblue;
  /* height: 800px; */
  background-image: url(@/assets/微信图片_20230427000450.png);
  /* padding-top: -70%; */

  background-size: 100% 100%;
}
</style>
